<template>
  <div id="stage">
    <div class="row" v-for="(row, i) in levelData.map" :key="i">
      <div
        class="cell"
        v-for="(item, i) in row"
        :key="i"
        :class="[ELEMENT[item]]"
      ></div>
    </div>
    <player
      v-model="levelData.player"
      :size="SIZE"
      :map="levelData.map"
      :boxes="boxes"
      :target="levelData.target"
      @success="success"
    ></player>
    <box
      ref="boxes"
      v-for="(box, i) in levelData.box"
      :value="box"
      :key="'box' + i"
      :size="SIZE"
      :map="levelData.map"
    ></box>
    <target
      ref="targets"
      v-for="(box, i) in levelData.target"
      :value="box"
      :key="'target' + i"
      :size="SIZE"
    ></target>
  </div>
</template>

<script>
import Player from "./components/Player";
import Box from "./components/Box";
import Target from "./components/Target.vue";
export default {
  name: "App",
  components: {
    Player,
    Box,
    Target,
  },
  data() {
    return {
      boxes: [],
      SIZE: 80,
      ELEMENT: {
        0: "black",
        1: "wall",
        2: "road",
      },
      levels: [
        {
          map: [
            [0, 0, 1, 1, 1, 1, 0, 0],
            [0, 0, 1, 2, 2, 1, 0, 0],
            [0, 1, 1, 2, 2, 1, 1, 0],
            [0, 1, 2, 2, 2, 2, 1, 0],
            [1, 1, 2, 2, 2, 2, 1, 1],
            [1, 2, 2, 1, 2, 2, 2, 1],
            [1, 2, 2, 2, 2, 2, 2, 1],
            [1, 1, 1, 1, 1, 1, 1, 1],
          ],
          target: [
            [1, 3],
            [1, 4],
            [2, 4],
            [3, 5],
          ],
          box: [
            { position: [3, 4] },
            { position: [3, 3] },
            { position: [5, 4] },
            { position: [5, 5] },
          ],
          player: {
            position: [6, 3],
            // 上右下左
            direction: 1,
          },
        },
        {
          map: [
            [0, 0, 1, 1, 1, 1, 0, 0],
            [0, 0, 1, 2, 2, 1, 0, 0],
            [0, 1, 1, 2, 2, 1, 1, 0],
            [0, 1, 2, 2, 2, 2, 1, 0],
            [1, 1, 2, 2, 2, 2, 1, 1],
            [1, 2, 2, 1, 2, 2, 2, 1],
            [1, 2, 2, 2, 2, 2, 1, 1],
            [1, 1, 1, 1, 1, 1, 1, 1],
          ],
          target: [
            [1, 3],
            [1, 4],
            [2, 4],
            [3, 5],
          ],
          box: [
            { position: [3, 4] },
            { position: [3, 3] },
            { position: [5, 4] },
            { position: [5, 5] },
          ],
          player: {
            position: [6, 3],
            // 上右下左
            direction: 1,
          },
        },
      ],
      level: 0,
      levelData: {
        map: [],
        target: [],
        box: [],
        player: {
          position: [],
          direction: 1,
        },
      },
    };
  },
  methods: {
    init() {
      let data = this.levels[this.level];
      this.levelData.map = data.map.map((row) => row.slice());
      this.levelData.target = data.target.slice();
      this.levelData.box = data.box.map((box) => Object.assign({}, box));
      this.levelData.player = Object.assign({}, data.player);
      this.$nextTick(() => {
        this.boxes = this.$refs.boxes;
      });
    },
    success() {
      this.level += 1;
      this.init();
    },
    reset() {
      this.init();
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style>
#stage {
  position: relative;
}
.row {
  display: flex;
}
.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background-color: #ccc;
}
.cell.black {
  background-color: #000000;
}
.cell.wall {
  background-color: #aaa;
}
.cell.road {
  background-color: blue;
}
</style>
